<template>
	<view class="box-wrapper">
		<view class="head-box head-wrapper">
			<image class="image" mode="aspectFill" :src="userAvatar" @click="changeHeadImg"></image>
			<!-- <image class="image" mode="aspectFill" :src="userAvatar"></image> -->
			<view class="info">
				<view class="title">
					<text>{{ userInfo.nickname }}</text>
					<up-icon name="edit-pen-fill" @click="()=>usernamePopupRef.open('center')" style="display: inline-flex;margin-left: 8rpx;"></up-icon>
				</view>
				<view class="desc">
					{{ userInfo.tel }}
				</view>
			</view>
		</view>
		
		<view class="content-box">						
			<view class="menu-list">
				<view class="menu-item"  @click="navigateToUniPage('/pages/help/index')">
					<view class="label-box">
						<up-icon name="question-circle-fill" color="#15B8A6" class="icon"></up-icon>
						<text>{{ $t('pages.user.helpCenter') }}</text>
					</view>
					<view class="label-box">
						<up-icon name="arrow-right" class="icon"></up-icon>
					</view>
				</view>
				<view class="menu-item" @click="navigateToUniPage('/pages/about/index')">
					<view class="label-box">
						<up-icon name="error-circle-fill" color="#15B8A6" class="icon"></up-icon>
						<text>{{ $t('pages.user.aboutNPET') }}</text>
					</view>
					<view class="label-box">
						<up-icon name="arrow-right" class="icon"></up-icon>
					</view>
				</view>
				<view class="menu-item" @click="navigateToUniPage('/pages/setting/index')">
					<view class="label-box">
						<up-icon name="setting-fill" color="#15B8A6" class="icon"></up-icon>
						<text>{{ $t('pages.user.settings') }}</text>
					</view>
					<view class="label-box">
						<up-icon name="arrow-right" class="icon"></up-icon>
					</view>
				</view>
			</view>

            <view class="menu-list" style="margin-top: 30rpx;" @click="navigateToUniPage('/pages/pets/list')">
				<view class="menu-item">
					<view class="label-box">
						<text>{{ $t('pages.user.MyPet') }} {{totalPets}}</text>
					</view>
					<view class="label-box">
						<text>{{ $t('common.more') }}</text>
						<up-icon name="arrow-right" class="icon"></up-icon>
					</view>
				</view>
				<view class="animal-list">
					<view class="item" v-for="animal in animalList" :key="animal.id">
						<image class="image" :src="animal.deviceimg" mode="aspectFill"></image>
						<view class="one-row-ellipsis" style="width: 100%;">{{ animal.nickname }}</view>
					</view>
                    <view class="item" v-if="animalList.length<=config.maxAnimal-1">
						<image class="image" src="/static/images/user/addPet.png" mode="aspectFill"></image>
						<view class="one-row-ellipsis" style="width: 100%;"></view>
					</view>
				</view>
			</view>

		</view>
		
		<!-- 修改昵称弹出框 -->
		<uni-popup ref="usernamePopupRef">
			<view class="username-popup">
				<view class="title">{{ $t('pages.user.username') }}</view>
				<input class="input" type="text" v-model="updateUserInfo.nickname" maxlength="10"/>
				<view class="footer">
					<view class="change" @click="closeNickNamePopup">
						{{ $t('common.cancel') }}
					</view>
					<view class="change" @click="changeUserNickName">
						{{ $t('common.confirm') }}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { getUserInfoApi, getChongWuListApi, uploadUserInfo, } from "@/api/request";
import { onShow, } from "@dcloudio/uni-app";
import { reactive, ref, computed, } from 'vue';
import { CacheUtils, navigateToUniPage, } from "@/utils";
import { chooseAndUploadPortrait, } from '@/utils/upload';
import { useI18n } from 'vue-i18n';

const config = {
	maxAnimal: 4,
}
const { t } = useI18n();
const userInfo = ref({}), animalList = ref([]), totalPets = ref(0);
const updateUserInfo = reactive({
	nickname: '',
});
const usernamePopupRef = ref(null);
const userAvatar = computed(()=> userInfo.value.avatar||'/static/images/user/shexiangji.png' );


const fetchAnimalList = async () => {	
	const { list=[] }  = await getChongWuListApi();
    totalPets.value = list.length;
	animalList.value = list.slice(0,config.maxAnimal);
}

const closeNickNamePopup = ()=> usernamePopupRef.value.close();
const changeUserNickName = async ()=>{
	if(updateUserInfo.nickname.length>10){
		return uni.showToast({
			title: t('pages.user.newNickLengthErr'),
			icon: 'none'
		});
	}
	await uploadUserInfo({
		nickname: updateUserInfo.nickname || '',
		avatar: userInfo.value.avatar || ''
	});
	refreshUserInfo();
	closeNickNamePopup();
}


	
const refreshUserInfo = async ()=>{
	userInfo.value = await getUserInfoApi();
}

const changeHeadImg = async ()=>{
	const result = await chooseAndUploadPortrait();
	await uploadUserInfo({
		nickname: userInfo.value.nickname || '',
		avatar: result.filepath || ''
	});
	refreshUserInfo();
}

onShow(()=>{
	refreshUserInfo();
	fetchAnimalList();
})
</script>


<style lang="scss" scoped>
	.box-wrapper {
		position: relative;        
		background-size: contain;
		background-repeat: no-repeat;
		width: 750rpx;
		height: 100%;
        background: linear-gradient( 180deg, #15B8A6 0%, rgba(21,184,166,0.1) 100%), rgba(0,0,0,0);

		.head-box {
			position: absolute;
            background: linear-gradient( 180deg, #15B8A6 0%, rgba(21,184,166,0.8) 100%), rgba(0,0,0,0);
			left: 0rpx;
			right: 0rpx;
			top: 0rpx;
            padding: 50rpx 50rpx;
            padding-top: 80rpx;
            border-radius: 0px 0px 64rpx 64rpx;
		}

		.content-box {
			position: absolute;
			// height: 860rpx;
			overflow-y: auto;
			top: 280rpx;
			bottom: 20rpx;
			left: 0;
			right: 0;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 30rpx;
			text-align: center;
		}
	}
	
	.head-wrapper{
		display: flex;
		column-gap: 30rpx;
		align-items: center;
		.image{
			display: block;
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			border: 2rpx solid #ffffff;
		}
		.info{
			flex: 1;
			width: 450rpx;
			color: #FFFFFF;
			.title{
				font-size: 36rpx;
			}
			.desc{
				margin-top: 8rpx;
				font-size: 28rpx;
			}
		}
	}
	
	.animal-list{
		display: grid;
		margin-top: 10rpx;
		grid-template-columns: repeat(auto-fill, 100rpx);
		grid-auto-rows: 150rpx;
		row-gap: 20rpx;
		column-gap: 40rpx;
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			row-gap: 6rpx;
			font-size: 24rpx;
			text-align: center;
						
			.image{
				display: block;
				width: 100rpx;
				height: 100rpx;
				object-fit: cover;
				border-radius: 50%;
			}
		}
	}
	
	.username-popup {
		width: 644rpx;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		padding: 30rpx 20rpx;
	
		.title {
			height: 70rpx;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 70rpx;
			text-align: center;
		}
	
		.input {
			height: 100rpx;
			margin: 20rpx auto;
			padding: 0 40rpx;
			background: #F7F8FA;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
		}
	
		.footer {
			align-items: center;
			display: flex;
			justify-content: space-around;
			margin-top: 30rpx;
			padding: 30rpx 0 0;
			border-top: 2rpx solid #F7F8FA;
	
			.change {
				flex: 1;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}
</style>